<template>
  <div>
    <Modal
      v-model="visible"
      title="修改密码"
      width="500"
      :mask-closable="false"
      :loading="loading">
      <Form ref="passForm" :model="form" :rules="ruleValidate" :label-width="80">
        <FormItem label="原密码" prop="password">
          <Input v-model="form.password" type="password" placeholder="请输入密码"/>
        </FormItem>
        <FormItem label="确认密码" prop="newPassword">
          <Input v-model="form.newPassword" type="password"  placeholder="请再次输入密码"/>
        </FormItem>
        <FormItem label="确认密码" prop="confirmPassword">
          <Input v-model="form.confirmPassword" type="password"  placeholder="请再次输入密码"/>
        </FormItem>
      </Form>
      <div class="demo-drawer-footer">
        <Button type="primary" style="margin-right: 8px" :loading="submitLoading" @click="submitForm">{{$t("submit")}}</Button>
        <Button  @click="close">{{$t("close")}}</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
/**
 * TODO
 * @version 1.0
 * @author 子丶沫
 * @date 2020/12/3 16:37
 */
import {checkPassword,updatePasswd} from "@/api/user";
export default {
  name: "NewPassword",
  data(){
    const validateOldPass = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码长度不得小于6位'));
      } else {
        let Base64 = require('js-base64').Base64;
        let password=Base64.encode(value);
        checkPassword(password).then(res=>{
          if(res.code===200&&res.data){
            callback();
          }else{
            callback(new Error('原密码不正确'));
          }
        })
      }
    };
    const validateNewPass = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码长度不得小于6位'));
      } else {
        callback();
      }
    };
    const validateConfirmPass = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码长度不得小于6位'));
      } else if(this.form.newPassword!=value) {
        callback(new Error("两次输入的密码不一致"));
      }else{
        callback()
      }
    };
    return{
      visible: false,
      loading: true,
      submitLoading:false,
      form: {
        newPassword:'',
      },
      count:60,
      ruleValidate: {
        password: [
          { required: true, message: '请输入原密码', trigger: 'blur' },
          {validator:validateOldPass,trigger: 'blur'}
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          {validator:validateNewPass,trigger: 'blur'}
        ],
        confirmPassword: [
          { required: true, message: '请再次输入新密码', trigger: 'blur' },
          {validator:validateConfirmPass,trigger: 'blur'}
        ],
      }
    }
  },
  methods:{
    submitForm () {
      this.$refs['passForm'].validate((valid) => {
        if (valid) {
            this.submitLoading=true;
            let Base64 = require('js-base64').Base64;
            let encode = Base64.encode(this.form.newPassword);
            updatePasswd({password: encode}).then(res=>{
              if(res.code===200){
                 this.editSuccess(res);
              }else{
                 this.$Message.error('修改失败');
                 this.close();
              }
            })
        } else {
        }
      })
    },
    handleReset () {
      this.$refs['passForm'].resetFields();
    },
    close(){
      this.visible=false;
    },
    editSuccess(){
      let that=this;
      that.submitLoading=false;
      that.close();
      that.$Modal.confirm({
        title:'提示',
        content:'修改成功，请重新登录.',
        okText:'确定',
        cancelText:'稍后登录',
        onOk:function (){
          that.$store.dispatch('handleLogOut').then(()=>{
            that.$router.push({ path: 'login', query: { redirect: that.$route.path } })
          })
        }
      })
    },
  },
  mounted(){

  }
}
</script>

<style scoped>
.demo-drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>
